.recent_posts_card {
  position: relative;
  overflow: hidden;
  margin-top: 1rem;
  border-radius: 8px;
  background: var(--card-bg);
  -webkit-box-shadow: 0 4px 8px 6px rgba(7, 17, 27, 0.06);
  box-shadow: 0 4px 8px 6px rgba(7, 17, 27, 0.06);
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;

  .card_content {
    padding: 1rem 1.2rem;
    .headline {
      padding-bottom: 0.3rem;
      font-size: 1.2em;
      :last-child {
        margin-left: 0.5rem;
      }
    }
    .item {
      display: -webkit-box;
      display: -moz-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: box;
      display: flex;
      -webkit-box-align: center;
      -moz-box-align: center;
      -o-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
      padding: 0.3rem 0;
      padding-top: 0.3rem;
      :not(:last-child) {
        border-bottom: 1px dashed #f5f5f5;
      }
      :first-child {
        padding-top: 0;
      }

      .thumbnail {
        overflow: hidden;
        width: 4.2em;
        height: 4.2em;

        img {
          width: 100%;
          height: 100%;
          -webkit-transition: all 0.6s;
          -moz-transition: all 0.6s;
          -o-transition: all 0.6s;
          -ms-transition: all 0.6s;
          transition: all 0.6s;
          object-fit: cover;

          &:hover {
            -webkit-transform: scale(1.1);
            -moz-transform: scale(1.1);
            -o-transform: scale(1.1);
            -ms-transform: scale(1.1);
            transform: scale(1.1);
          }
        }
      }

      .content {
        -webkit-box-flex: 1;
        -moz-box-flex: 1;
        -o-box-flex: 1;
        box-flex: 1;
        -webkit-flex: 1;
        -ms-flex: 1;
        flex: 1;
        padding-left: 10px;
        word-break: break-all;

        .title {
          color: var(--font-color);
          font-size: 95%;
          line-height: 1.5;
          -webkit-line-clamp: 2;
          display: -webkit-box;
          overflow: hidden;
          -webkit-box-orient: vertical;

          &:hover {
            color: #49b1f5;
          }
        }
      }
    }
  }
}

.recent_posts_card:hover {
  -webkit-box-shadow: 0 4px 12px 12px rgba(7, 17, 27, 0.15);
  box-shadow: 0 4px 12px 12px rgba(7, 17, 27, 0.15);
}
